<template>
  <div class="keshangpingce">
    <div class="kspctopposidiv">
      <div style="font-size: 0.8rem">时间:&nbsp;&nbsp;</div>
      <div class="style1" style="margin-right: 30px">
        <dataPicker
          :disabled="isDisabled"
          v-model="year"
          type="year"
          value-format="yyyy"
          placeholder="请选择"
          :editable="false"
          prefix-icon="1"
          @change="gettypeSupplierTOP10()"
        />
      </div>
      <div style="font-size: 0.8rem">搜索:&nbsp;&nbsp;</div>
      <div
        style="display: flex; align-items: center"
        class="kspcinputclass"
        id="searchinput"
      >
        <div style="position: relative">
          <div style="display: flex; align-items: center" class="kspcinputshur">
            <el-input
              id="inputval"
              placeholder="请输入企业名称"
              v-model="qymcnamekspc"
              @keyup.enter.native="showselect(1)"
              clearable
            >
            </el-input>
            <img
              src="../assets/searchpage.png"
              style="height: 1.1rem; cursor: pointer"
              @click="showselect(1)"
            />
          </div>

          <div
            style="
              position: absolute;
              top: 1.8rem;
              left: 0.5rem;
              background-color: white;
              z-index: 9999;
              width: 20rem;
              padding: 0.1rem;
            "
            v-if="showkspc"
            v-clickoutside="handleClose"
          >
            <ul
              v-if="kspclist.length > 0"
              class="container kspctopposidivsmall"
              ref="container"
              @scroll="handleScroll"
            >
              <li
                v-for="(item, index) in kspclist"
                :key="index"
                class="kspctopposidivsmallli"
                @click="kspclistclickitem1(item.enterpriseid)"
                :title="item.enterprisename"
              >
                {{ index + 1 }}&nbsp;&nbsp;&nbsp;{{ item.enterprisename }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 客商评测弹框 -->
    <div style="position: relative; height: 100%">
      <div class="mainContent">
        <div class="maindivcontent" style="height: 100%">
          <div
            class="mevaluatimiddle1"
            v-show="loading"
            style="
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: space-around;
            "
          >
            <dv-loading>Loading...</dv-loading>
          </div>
          <div class="mevaluatimiddle" v-show="!loading">
            <div
              class="mevaluatimiddleswipersamall"
              style="
                display: flex;
                flex-direction: column;
                justify-content: space-between;
              "
              v-for="(item, index) in tableList"
              :key="index"
            >
              <!-- <div class="flexbetn">
                <p class="flebtntitle">
                  {{ item.title }}
                </p>
                <p class="fontstyleblack">{{ item.subtitle }}</p>
              </div> -->
              <div>
                <div class="color">
                  <div class="text">{{ item.title }}</div>
                  <div class="see-more" @click="handleSeeMore(item)">
                    更多<i class="el-icon-arrow-right"></i>
                  </div>
                </div>
                <div class="flecaround">
                  <p>TOP10</p>
                  <div></div>
                  <span style="font-size: 0.6rem">中标金额</span>
                </div>
              </div>
              <div class="casket" style="height: calc(100% - 2.2rem)">
                <div
                  v-for="(item, index) in item.list"
                  :key="index"
                  style=""
                  class="info"
                  @click="kspclistclickitem(item.supplierid)"
                >
                  <div class="info-hz">
                    <p class="textchuli">
                      {{ index + 1 }}
                      <span :title="item.suppliername">{{
                        item.suppliername || ""
                      }}</span>
                    </p>
                  </div>
                  <div class="num">
                    {{ returnFloat(item.totalprice / 10000) }}万元
                  </div>
                </div>
                <!-- <div
                  class="swiper-container gdwcgqkswiper"
                  :class="'gdwcgqkswiper' + index"
                  style="width: 90%; height: 97%; margin-top: 1%"
                >
                  <div class="swiper-wrapper" style="flex-direction: column">
                    <div
                      class="swiper-slide"
                      v-for="(item, index) in item.list"
                      :key="index"
                      @click="kspclistclickitem(item.supplierid)"
                    >
                      <div class="info">
                        <div class="info-hz">
                          <p class="textchuli">
                            {{ index + 1 }}
                            <span :title="item.suppliername">{{
                              item.suppliername || ""
                            }}</span>
                          </p>
                        </div>
                        <div class="num">
                          {{ returnFloat(item.totalprice / 10000) }}万元
                        </div>
                      </div>
                    </div>
                  </div>
                </div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      v-if="kspcmiddlevisiable"
      style="width: 100%; height: 100%"
      id="showvisible"
    >
      <Kspcxiaodialog :modalVisible="kspcmiddlevisiable">
        <template>
          <div class="popup">
            <div class="tag-conter">
              <div class="text" v-if="detailinfo.categoryList != null">
                {{ detailinfo.categoryList[0].categoryname.slice(0, 4) || "-" }}
              </div>
              <div class="text2" v-if="detailinfo.isinner != null">
                {{ detailinfo.isinner == 1 ? "外" : "内" }}
              </div>
            </div>
            <div class="theme">
              <div style="max-width: 90%; display: inline-block">
                <el-tag
                  effect="dark"
                  size="mini"
                  v-if="detailinfo.udfdatajson['udf_fxbirn_8510']"
                  style="
                    background: #009245;
                    max-width: 90%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: inline-block;
                  "
                  :title="detailinfo.udfdatajson['udf_fxbirn_8510']"
                  >{{ detailinfo.udfdatajson["udf_fxbirn_8510"] }}</el-tag
                >
              </div>
              <div style="height: 2rem">
                <p
                  v-if="detailinfo.enterprisename"
                  class="textchuli"
                  style="width: 93%"
                  :title="detailinfo.enterprisename"
                >
                  {{ detailinfo.enterprisename }}
                </p>
              </div>

              <div class="info-xy">
                <div class="lable">统一社会信用代码</div>
                <div class="value">
                  {{ detailinfo.orgnizationcode || "-" }}
                </div>
                <div
                  v-if="detailinfo.orgnizationcode"
                  class="icon"
                  @click="gocopy"
                  v-copy="detailinfo.orgnizationcode"
                >
                  <img src="@/assets/lwfb-fz.png" alt="" />
                </div>
              </div>
              <div class="info-sf">
                <div class="name" v-if="detailinfo.contactperson">
                  {{ detailinfo.contactperson }}
                </div>
                <div class="phone" v-if="detailinfo.phone || detailinfo.mobile">
                  {{ detailinfo.phone || detailinfo.mobile }}
                </div>
                <div class="risk" style="cursor: pointer" @click="waibufenxian">
                  <i
                    class="el-icon-warning"
                    style="
                      margin-right: 0.2rem;
                      font-size: 0.9rem;
                      color: #f15a24;
                    "
                  ></i
                  >外部风险
                </div>
                <div class="name-icon">
                  <img src="@/assets/lwfb-tx.png" alt="" style="" />
                </div>
                <div class="name-phone">
                  <img src="@/assets/lwfb-dh.png" alt="" />
                </div>
              </div>
              <div class="info-fw" style="">
                <div class="title">经营范围</div>
                <div
                  style="
                    height: 100%;
                    overflow: hidden;
                    max-height: 4rem;
                    overflow-y: scroll;
                  "
                  class="scrollbar"
                >
                  <span
                    style="font-size: 0.8rem"
                    :title="detailinfo.primarybusiness"
                    >{{ detailinfo.primarybusiness || "-" }}</span
                  >
                </div>
                <!-- <div
                  style="height: 100%; overflow-y: scroll; font-size: 0.8rem"
                  :title="detailinfo.primarybusiness"
                >
                <p style="font: 0.8rem;">
                  {{ detailinfo.primarybusiness || "-" }}
                </p> 
                </div> -->
              </div>
              <div class="info-from">
                <div class="li">
                  <div class="lable">企业性质</div>
                  <div class="value">{{ detailinfo.kspcqyxz || "-" }}</div>
                </div>
                <div class="li">
                  <div class="lable">企业类型</div>
                  <div class="value">
                    {{
                      detailinfo.typename == 1
                        ? "生产商"
                        : detailinfo.typename == 2
                        ? "经销商/代理商"
                        : "其他" || "-"
                    }}
                  </div>
                </div>
                <div class="li">
                  <div class="lable">法定代表人</div>
                  <div class="value">
                    {{ detailinfo.representative || "-" }}
                  </div>
                </div>
                <div class="li">
                  <div class="lable">注册资金</div>
                  <div class="value">
                    {{
                      detailinfo.registercapital == 0 ||
                      detailinfo.registercapital == null
                        ? "-"
                        : detailinfo.registercapital + "万元" || "-"
                    }}
                  </div>
                </div>

                <div
                  class="li"
                  v-if="
                    detailinfo.extdatajson != null &&
                    detailinfo.extdatajson.bank != undefined
                  "
                >
                  <div class="lable">开户银行</div>
                  <div class="value" :title="detailinfo.extdatajson.bank">
                    {{ detailinfo.extdatajson.bank || "-" }}
                  </div>
                  <div
                    class="icon"
                    @click="gocopy"
                    v-copy="detailinfo.extdatajson.bank"
                  >
                    <img src="@/assets/lwfb-fz.png" alt="" />
                  </div>
                </div>
                <div class="li" v-else>
                  <div class="lable">开户银行</div>
                  <div class="value">-</div>
                  <div class="icon"></div>
                </div>

                <div
                  class="li"
                  v-if="
                    detailinfo.extdatajson != null &&
                    detailinfo.extdatajson.accountname != undefined
                  "
                >
                  <div class="lable">账户名称</div>
                  <div
                    class="value"
                    :title="detailinfo.extdatajson.accountname"
                  >
                    {{ detailinfo.extdatajson.accountname || "-" }}
                  </div>
                  <div
                    class="icon"
                    @click="gocopy"
                    v-copy="detailinfo.extdatajson.accountname"
                  >
                    <img src="@/assets/lwfb-fz.png" alt="" />
                  </div>
                </div>
                <div class="li" v-else>
                  <div class="lable">账户名称</div>
                  <div class="value">-</div>
                  <div class="icon"></div>
                </div>

                <div
                  class="li"
                  v-if="
                    detailinfo.extdatajson != null &&
                    detailinfo.extdatajson.banknumber != undefined
                  "
                >
                  <div class="lable">银行账号</div>
                  <div class="value" :title="detailinfo.extdatajson.banknumber">
                    {{ detailinfo.extdatajson.banknumber || "-" }}
                  </div>
                  <div
                    class="icon"
                    @click="gocopy"
                    v-copy="detailinfo.extdatajson.banknumber"
                  >
                    <img src="@/assets/lwfb-fz.png" alt="" />
                  </div>
                </div>
                <div class="li" v-else>
                  <div class="lable">银行账号</div>
                  <div class="value">-</div>
                  <div class="icon"></div>
                </div>

                <div
                  class="li"
                  v-if="
                    detailinfo.extdatajson != null &&
                    detailinfo.extdatajson.unionpayno != undefined
                  "
                >
                  <div class="lable">联行号</div>
                  <div class="value" :title="detailinfo.extdatajson.unionpayno">
                    {{ detailinfo.extdatajson.unionpayno || "-" }}
                  </div>
                  <div
                    class="icon"
                    @click="gocopy"
                    v-copy="detailinfo.extdatajson.unionpayno"
                  >
                    <img src="@/assets/lwfb-fz.png" alt="" />
                  </div>
                </div>
                <div class="li" v-else>
                  <div class="lable">联行号</div>
                  <div class="value">-</div>
                  <div class="icon"></div>
                </div>

                <div
                  class="li"
                  v-if="
                    detailinfo.extdatajson != null &&
                    detailinfo.extdatajson != null
                  "
                >
                  <div class="lable">币种</div>
                  <div class="value">
                    {{
                      detailinfo.extdatajson.currency == "USB"
                        ? "美元"
                        : detailinfo.extdatajson.currency == "HKD"
                        ? "港币"
                        : detailinfo.extdatajson.currency == "JPY"
                        ? "日元"
                        : "人民币" || "-"
                    }}
                  </div>
                </div>
                <div class="li" v-else>
                  <div class="lable">币种</div>
                  <div class="value">-</div>
                </div>
              </div>
              <div class="info-qy">
                <div
                  class="region"
                  :style="{
                    justifyContent: detailinfo.businessareaname
                      ? 'space-around'
                      : '',
                  }"
                >
                  <div class="lable">经营区域</div>
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      justify-content: space-around;
                      width: calc(100% - 3.2rem);
                    "
                  >
                    <div
                      class="value"
                      :style="{
                        width: detailinfo.businessareaname ? '30%' : '90%',
                      }"
                      :title="detailinfo.businessareaname"
                      v-if="detailinfo.businessareaname"
                    >
                      {{ detailinfo.businessareaname }}
                    </div>
                    <img
                      src="../assets/baisesanjiao.png"
                      style="width: 0.5rem; height: 0.5rem"
                      v-if="detailinfo.businessareaname"
                    />
                    <div
                      class="value"
                      :style="{
                        width:
                          !detailinfo.businessareaname &&
                          detailinfo.provincename
                            ? '90%'
                            : '70%',
                      }"
                      :title="`${detailinfo.provincename}${detailinfo.cityname}${detailinfo.regionname}`"
                    >
                      {{ detailinfo.provincename }}{{ detailinfo.cityname
                      }}{{ detailinfo.regionname }}
                    </div>
                  </div>
                </div>
                <div class="location" v-if="detailinfo.address">
                  <div class="icon">
                    <img src="@/assets/lwfb-dw.png" alt="" />
                  </div>
                  <div class="lie" :title="detailinfo.address">
                    {{ detailinfo.address }}
                  </div>
                </div>
              </div>
              <div class="information">
                <div @click="gengduoxinxi" style="cursor: pointer">
                  <p style="text-decoration: underline">更多信息</p>
                </div>
              </div>
            </div>
          </div>
        </template>
      </Kspcxiaodialog>
    </div>
    <div v-if="kspcmiddlevisiable2" style="width: 100%; height: 100%">
      <Kspcxiaodialog2 :modalVisible="kspcmiddlevisiable2">
        <div class="table-conter" v-if="supplierData.length > 0">
          <div class="head">{{ supplierText }}</div>
          <div class="table-son">
            <tablecomponentsjgzzsmall
              :tableData="supplierData"
              :currentPage="page"
            />
            <!-- <el-table
              :data="supplierData"
              style="width: 100%"
              height="100%"
              :header-cell-style="{ backgroundColor: '#192c55', color: '#fff' }"
              :row-class-name="tableRowClassName"
              @row-click="rowClick"
            >
              <el-table-column
                align="center"
                type="index"
                label="序号"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="suppliername"
                label="公司名称"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                width="200"
                align="center"
                prop="totalprice"
                show-overflow-tooltip
                label="中标金额"
              >
              </el-table-column>
            </el-table> -->
          </div>
          <div class="kspcfenyeqi">
            <el-pagination
              style="margin-top: 5%"
              small
              background
              align="center"
              @current-change="alldatacurrentpage"
              :current-page="page"
              :page-size="10"
              layout="total,prev,pager,next,jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
        <div
          class="table-conter"
          v-else
          style="
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
          "
        >
          <dv-loading>Loading...</dv-loading>
        </div>
      </Kspcxiaodialog2>
    </div>
  </div>
</template>
<script>
let that = this;
const clickoutside = {
  // 初始化指令
  bind(el, binding, vnode) {
    function documentHandler(e) {
      let ele = document.getElementById("showvisible");
      let inpputval = document.getElementById("inputval").value;
      console.log(inpputval, "inpputval");
      // 这里判断点击的元素是否是本身，是本身，则返回
      if (ele == null || inpputval == "") {
        if (el.contains(e.target)) {
          return false;
        }
      } else {
        if (el.contains(e.target) || ele) {
          // document.getElementById("inputval").value = ""
          return false;
        }
      }

      // 判断指令中是否绑定了函数
      if (binding.expression) {
        // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
        binding.value(e);
      }
    }
    // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
    el.__vueClickOutside__ = documentHandler;
    document.addEventListener("click", documentHandler);
  },
  update() {},
  unbind(el, binding) {
    // 解除事件监听
    document.removeEventListener("click", el.__vueClickOutside__);
    delete el.__vueClickOutside__;
  },
};

import APIS from "@/api/index";
import { Message } from "element-ui";
import Swiper from "swiper/bundle";
import axios from "axios";
import dataPicker from "@/components/datePicker/index.js";
import Kspcxiaodialog from "@/components/kspcxiaodialog.vue";
import Kspcxiaodialog2 from "@/components/kspcxiaodialog2.vue";
import popover from "@/components/popover/index.js";
import tablecomponentsjgzzsmall from "@/components/tablecomponentsjgzzsmall.vue";
export default {
  props: {},
  directives: { clickoutside },
  data() {
    return {
      year: null,
      loading: true,
      mySwiperhyjjwcgqk: "",
      tableList: [],
      qymcnamekspc: "",
      showkspc: false,
      pageNum: 1,
      pageSize: 10,
      kspclist: [],
      isDisabled: false,
      kspcmiddlevisiable: false,
      kspcmiddlevisiable2: false,
      detailinfo: {},
      supplierData: [],
      total: 0,
      page: 1,
      objtype: "",
      supplierText: "",
      dataLoading: false,
      timer: null,
      timet: null,
      // options: [],
      // value: "",
      count: 0,
      timer: "",
    };
  },
  watch: {
    kspcmiddlevisiable(v) {
      // this.$refs.popover.doChangeDMClickStatus(v);
    },
    qymcnamekspc(newVal, oldVal) {
      if (newVal != oldVal) {
        this.count = 0;
        this.kspclist = [];
        this.showkspc = false;
      }
    },
  },
  computed: {},
  //
  components: {
    Kspcxiaodialog,
    popover,
    Kspcxiaodialog2,
    tablecomponentsjgzzsmall,
    dataPicker,
  },
  mounted() {
    // kspcbottomtopten
    // let kspcbottomtoptenarr = JSON.parse(
    //   localStorage.getItem("kspcbottomtopten")
    // );
    // let namearr = [];
    // let swiperarr = [];
    // if (kspcbottomtoptenarr != null) {
    //   setTimeout(() => {
    //     if (kspcbottomtoptenarr.temp > new Date().getTime()) {
    //       console.log(kspcbottomtoptenarr.data, "kspcbottomtoptenarr.data");
    //       if (kspcbottomtoptenarr.data) {
    //         for (let key in kspcbottomtoptenarr.data) {
    //           let arr = key.split("-");
    //           namearr.push({
    //             name: arr[0] + "供应商",
    //           });
    //           swiperarr.push(kspcbottomtoptenarr.data[key]);
    //         }
    //         namearr.forEach((item, index) => {
    //           this.tableList.push({
    //             title: item.name,
    //             // subtitle: "中标金额",
    //             list: swiperarr[index],
    //             id: 1,
    //           });
    //         });
    //         this.loading = false;
    //       } else {
    //         console.log("false", "false");
    //         this.gettypeSupplierTOP10();
    //       }
    //     } else {
    //       this.gettypeSupplierTOP10();
    //     }
    //   }, 1100);
    // } else {
      this.gettypeSupplierTOP10();
    // }
  },

  beforeDestroy() {
    //清除定时器
    clearTimeout(this.timet);
    this.timet = null;
  },
  methods: {
    handleClose() {
      this.showkspc = false;
    },
    animation() {
      if (!this.loading) {
        this.loading = true;
        this.timet = setTimeout(() => {
          this.loading = false;
        }, 1000);
      }
    },
    // show() {
    //   this.showselect(1);
    // },
    // hide() {
    //   this.kspclist = [];
    // },
    gocopy() {
      this.$message({
        message: "已复制",
        offset: window.screen.height / 2.8,
        duration: 1000,
      });
    },
    gengduoxinxi() {
      var s = [
        `基本信息,/enterprise/simple/v?_m=sm/supplier/mainlib/edit&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `银行信息,/enterprise/simple/v?_m=sm/supplier/bank/sm_bank_info&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `联系人,/enterprise/simple/v?_m=sm/supplier/linkman&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `历史业绩,/enterprise/simple/v?_m=sm/supplier/history&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `证照附件,/enterprise/simple/v?_m=sm/supplier/certificate&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `班组信息,/enterprise/simple/v?_m=sm/supplier/relied_groups&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `考察报告,/enterprise/simple/v?_m=sm/supplier/check/check_records&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `平台合作记录,/enterprise/simple/v?_m=sm/supplier/cooperation&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `退回记录,/enterprise/simple/v?_m=sm/supplier/return_record&supplierid=${this.detailinfo.enterpriseid}`,
        `修改记录,/enterprise/simple/v?_m=sm/supplier/editrecords&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `转库记录,/enterprise/simple/v?_m=sm/supplier/transferlib_record&supplierid=${this.detailinfo.enterpriseid}`,
        `合作单位,/enterprise/simple/v?_m=sm/supplier/platforms&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `评价记录,/enterprise/simple/v?_m=sm/supplier/evalrecords&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `备注信息,/enterprise/simple/v?_m=sm/supplier/comments&readonly=false&supplierid=${this.detailinfo.enterpriseid}`,
        `会员费缴费记录,/enterprise/simple/v?_m=sm/supplier/supp_member_fee_record&supplierid=${this.detailinfo.enterpriseid}`,
        `服务费缴费记录,/enterprise/simple/v?_m=sm/supplier/supp_trade_fee_record&supplierid=${this.detailinfo.enterpriseid}`,
      ];

      let url =
        this.base_url+"/tabs2?tabs=" +
        s
          .map((item) => {
            return (
              encodeURI(item.split(",")[0]) +
              encodeURIComponent("," + item.split(",")[1])
            );
          })
          .join(";");
      window.open(url);
    },
    waibufenxian() {
      this.clickitem(this.detailinfo);
    },
    checkInClickArea() {
      return this.kspcmiddlevisiable;
    },
    closepopup() {
      setTimeout(() => {
        this.kspcmiddlevisiable = false;
        // this.showkspc = true;
      }, 100);
      this.showkspc = true;
    },
    closepopup2() {
      this.kspcmiddlevisiable2 = false;
      this.supplierData = [];
      this.page = 1;
    },
    // 查看更多
    handleSeeMore(e) {
      if (e.list[0]) {
        this.objtype = e.list[0].objtype;
        this.supplierText = e.title;
        this.loadTypeSupplierList();
        this.kspcmiddlevisiable2 = true;
        // this.supplierData=[{suppliername:'阿里巴巴不',totalprice:'1000万元'}]
      } else {
        Message({
          message: "暂无更多数据！",
          offset: window.screen.height / 2.8,
          duration: 1000,
        });
      }
    },
    // 查看更多数据
    loadTypeSupplierList() {
      const parameter = {
        objtype: this.objtype,
        pageSize: 10,
        pageNum: this.page,
      };
      if (this.year) {
        parameter.year = this.year;
      }
      APIS.Kspc.typeSupplierList(parameter).then((res) => {
        const data = res.data ? res.data : {};
        // {{ returnFloat(item.totalprice / 10000) }}万元
        this.supplierData = data.items.map((item) => {
          item.totalprice = this.returnFloat(item.totalprice / 10000) + "万元";
          return item;
        });
        this.total = data.total;
      });
    },
    rowClick(e) {
      this.kspclistclickitem(e.supplierid);
    },
    alldatacurrentpage(e) {
      this.page = e;
      this.loadTypeSupplierList();
    },
    kspclistclickitem(id) {
      this.qymcnamekspc = "";
      this.getdetail(id);
      // this.showkspc = true;
    },
    kspclistclickitem1(id) {
      this.getdetail(id);
      // this.showkspc = true;
    },
    getdetail(id) {
      // getEnterprise
      APIS.Kspc.getEnterprise({ id: id })
        .then((res) => {
          APIS.Kspc.propertyList().then((res1) => {
            res1.data.forEach((item) => {
              if (res.data.property == item.diccode) {
                res.data.kspcqyxz = item.dicname;
              }
            });
            this.detailinfo = res.data;
            this.kspcmiddlevisiable = true;
          });
        })
        .catch((err) => {});
    },
    handleScroll() {
      if (
        this.$refs.container.scrollTop +
          this.$refs.container.clientHeight +
          5 >=
        this.$refs.container.scrollHeight
      ) {
        if (this.timer !== null) {
          clearTimeout(this.timer);
        }
        this.timer = setTimeout(() => {
          // if (this.dataLoading) return;
          this.load();
        }, 300);
      }
    },
    load() {
      this.pageNum++;
      this.showkspc = true;

      this.showselect(0, 1);
    },
    showselect(num, isgo) {
      // enterpriseNameList
      if (num == 1) {
        this.pageNum = 1;
      }
      if (this.qymcnamekspc) {
        APIS.Kspc.enterpriseNameList({
          year: this.year,
          enterpriseName: this.qymcnamekspc,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        })
          .then((res) => {
            if (res.data.items.length == 0) {
              if (!isgo) {
                this.$message({
                  message: "暂无搜索结果！",
                  offset: window.screen.height / 2.8,
                  duration: 1000,
                });
                this.count = 0;
              } else {
                if (this.count == 0) {
                  if (this.kspclist.length >= res.data.total) {
                    this.$message({
                      message: "暂无搜索结果！",
                      offset: window.screen.height / 2.8,
                      duration: 1000,
                    });
                    this.count++;
                  }
                }
              }

              // if (this.pageNum == 1) {
              //   this.showkspc = false;
              //   this.$message({
              //     message: "暂无搜索结果！",
              //     offset: window.screen.height / 2.8,
              //     duration: 1000,
              //   });
              // } else {
              //   this.$message({
              //     message: "暂无更多搜索结果！",
              //     offset: window.screen.height / 2.8,
              //     duration: 1000,
              //   });
              // }
              if (this.kspclist.length > 0) {
                this.$store.state.showpopover = this.kspclist;
              } else {
                this.$store.state.showpopover = [];
              }
            } else {
              if (num == 1) {
                this.kspclist = res.data.items;
                this.showkspc = true;
              } else {
                if (this.kspclist.length > 0) {
                  this.kspclist = this.kspclist.concat(res.data.items);
                  this.$store.state.showpopover = this.kspclist.concat(
                    res.data.items
                  );
                } else {
                  this.kspclist = res.data.items;
                  this.$store.state.showpopover = res.data.items;
                }
                this.showkspc = true;
              }
            }
          })
          .finally((_) => {
            this.dataLoading = false;
          });
      } else {
        this.$message({
          message: "请输入企业名称！",
          offset: window.screen.height / 2.8,
          duration: 1000,
        });
      }
    },
    getlink(name) {
      let data = {
        _: Date.now(),
        keyword: name,
      };
      axios({
        method: "post", //请求方法
        data: data,
        url: "https://srm.cnzgc.com/zjszjj/tyc/cloud-tempest/search/suggest/v3",
      })
        .then((res) => {
          //执行成功后代码处理
          if (res.data.errorCode == 0) {
            this.openlinknew(1, res.data.data[0].id);
          } else {
            this.openlinknew(0);
          }
        })
        .catch((error) => {
          this.openlinknew(0);
        });
    },
    openlinknew(num, id) {
      if (num == 1) {
        window.open(`https://www.tianyancha.com/company/${id}`);
      } else {
        window.open("https://www.tianyancha.com/");
      }
    },
    clickitem(item) {
      // for(var i = 0;i<11;i++){
      this.getlink(item.enterprisename);
      // }
    },
    returnFloat(num) {
      num = (parseInt(num * 100) / 100).toFixed(2);
      return num;
    },
    gettypeSupplierTOP10() {
      this.tableList = [];
      let namearr = [];
      let swiperarr = [];
      this.loading = true;
      this.isDisabled = true;
      APIS.Kspc.typeSupplierTOP10({ year: this.year })
        .then((res) => {
          this.loading = false;
          this.isDisabled = false;
          for (const key in res.data) {
            let arr = key.split("-");
            namearr.push({
              name: arr[0] + "供应商",
            });
            swiperarr.push(res.data[key]);
          }
          namearr.forEach((item, index) => {
            this.tableList.push({
              title: item.name,
              // subtitle: "中标金额",
              list: swiperarr[index],
              id: 1,
            });
          });
          // this.initTable();
          if (!this.year) {
            const t1 = new Date().getTime() + 10800000;
            let kspcbottomtoptenobj = {
              data: res.data,
              temp: t1,
            };
            localStorage.setItem(
              "kspcbottomtopten",
              JSON.stringify(kspcbottomtoptenobj)
            );
          }
          // const t1 = new Date().getTime() + 10800000;
          // let kspcbottomtoptenobj = {
          //   data: res.data,
          //   temp: t1,
          // };
          // localStorage.setItem(
          //   "kspcbottomtopten",
          //   JSON.stringify(kspcbottomtoptenobj)
          // );
          // setTimeout(() => {
          //   this.initTable();
          // }, 1000);
          this.loading = false;
        })
        .catch((err) => {});
    },
    initTable() {
      this.$nextTick(() => {
        for (let i = 0; i < 8; i++) {
          let swiper = new Swiper(`.gdwcgqkswiper${i}`, {
            direction: "vertical",
            slidesPerView: 10, //swiper容器同时展示的元素数量
            autoplay: {
              //开启自动切换
              delay: 2000, //自动切换的时间间隔
              stopOnLastSlide: false, //当切换到最后一个slide时停止自动切换
              disableOnInteraction: false, //用户操作swiper之后，是否停止自动切换效果
            },
            observer: true, //修改swiper自己或子元素时，自动初始化swiper
            observeParents: true, //修改swiper的父元素时，自动初始化swiper
            observeSlideChildren: true,
          });
          setTimeout(() => {
            swiper.el.onmouseover = () => {
              //鼠标放上暂停轮播
              swiper.autoplay.stop();
            };
            swiper.el.onmouseleave = () => {
              //鼠标放上暂停轮播
              swiper.autoplay.start();
            };
          }, 5000);
        }
      });
    },
  },
};
</script>
// 这种引入确保样式只在该组件生效
<style src="@/assets/css/public.css" scoped></style>
<style lang="scss" scoped>
.kspctopposidiv {
  height: 1.2rem;
  display: flex;
  align-items: center;
  position: absolute;
  top: -1.8rem;
  right: 0.5rem;
  .el-popover__reference-wrapper {
    display: flex;
  }
}
.kspctopposidivsmall {
  // width: 95%;
  // padding: 0.2rem;
  box-sizing: border-box;
  // background-color: white;
  height: 12rem;
  overflow: auto;
  // background-color: #edf1f9;
  // border-radius: 0.4rem;
  // box-shadow: 0.1rem 0 0.5rem 0 rgba(0, 0, 0, 0.5);

  .kspctopposidivsmallli {
    font-size: 0.8rem;
    padding: 0.2rem;
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden; //代表的是超出后隐藏
    white-space: nowrap; //禁止换行
    text-overflow: ellipsis; //超出后省略号
  }
  .kspctopposidivsmallli:hover {
    background-color: #192c55;
    color: white;
  }
}
::v-deep .kspcinputclass {
  border-radius: 2rem;
  height: 1.2rem;
  border: 1px solid;
  padding: 0.1rem;
  // zoom: 0.5;
  .el-input__inner {
    width: 20rem;
    height: 100%;
    line-height: 1.2rem;
    border-radius: 2rem;
    background-color: transparent;
    border: none;
  }
  .el-input {
    font-size: 0.7rem;
  }
  .el-input__suffix {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}

.keshangpingce {
  width: 98%;
  height: 100%;
  font-size: 1rem;
  margin: 0 auto;
  position: relative;
}

.textchuli {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.row-item {
  color: #192c55;
}

.row-item:nth-child(2) {
  background-image: linear-gradient(181deg, #fdbe45 6%, #c63228);
  color: transparent;
  -webkit-background-clip: text;
}
.casket::-webkit-scrollbar {
  display: none;
}
.casket {
  width: 100%;
  .info {
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 0.8rem;
    .info-hz {
      width: 60%;
      height: 100%;
    }
    .num {
    }
  }
  .info:hover {
    background-image: linear-gradient(181deg, #fdbe45 6%, #c63228);
    color: transparent;
    -webkit-background-clip: text;
  }
  // .info:nth-child(1) {
  //   background-image: linear-gradient(181deg, #fdbe45 6%, #c63228);
  //   color: transparent;
  //   -webkit-background-clip: text;
  // }
}
.color {
  background: #192c55;
  color: white;
  margin-bottom: 5px;
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .text {
    width: 12rem;
    overflow: hidden; //代表的是超出后隐藏
    white-space: nowrap; //禁止换行
    text-overflow: ellipsis; //超出后省略号
  }
  .see-more {
    cursor: pointer;
    font-size: 0.6rem;
    text-align: right;
    padding: 5px 5px;
  }
}

.popup {
  height: 100%;
  position: relative;
  padding: 1.8rem 0 0 3.8rem;
  box-sizing: border-box;
  .tag-conter {
    position: absolute;
    padding-top: 0.2rem;
    left: 0.9rem;
    top: 0.15rem;
    width: 2rem;
    height: 3.7rem;
    background-image: url("@/assets/lwfb-bgi.png");
    background-size: 100% 100%;
    text-align: center;
    color: #fff;
    font-size: 0.6rem;
    .text {
      height: 50%;
      font-size: 0.7rem;
    }
    .text2 {
      height: 50%;
      color: #192c55;
      font-size: 1rem;
      font-weight: bold;
      margin-top: 0.1rem;
      // display: flex;
      // align-items: center;
      // justify-content: space-around;
    }
  }
  .theme {
    color: #192c55;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 6%;
    box-sizing: border-box;
    justify-content: space-around;
    p {
      font-size: 1.1rem;
      margin-top: 0.2rem;
    }
    .info-xy {
      display: flex;
      height: 1.1rem;
      align-items: center;
      margin-top: 0.3rem;
      .lable {
        background-color: #192c55;
        color: #fff;
        padding: 0.2rem 0.7rem;
        font-size: 0.6rem;
      }
      .value {
        margin-left: 0.3rem;
        font-size: 0.9rem;
        font-weight: bold;
      }
      .icon {
        margin-left: 3rem;
        img {
          width: 0.9rem;
          height: 0.8rem;
        }
      }
    }
    .info-sf {
      margin-top: 0.8rem;
      display: flex;
      color: #fff;
      font-size: 0.6rem;
      position: relative;
      .name {
        background-color: #192c55;
        padding: 0rem 0 0rem 3rem;
        display: flex;
        align-items: center;
        height: 1.2rem;
        width: 13%;
        white-space: nowrap; //不支持换行
        overflow: hidden; //隐藏多出部分文字
        text-overflow: ellipsis; //用省略号代替多出部分文字
      }
      .phone {
        padding: 0rem 2rem 0rem 2.3rem;
        background-color: #192c55;
        font-size: 0.8rem;
        font-weight: bold;
        display: flex;
        align-items: center;
        height: 1.2rem;
      }
      .risk {
        color: #192c55;
        font-size: 0.7rem;
        display: flex;
        align-items: center;
        margin-left: 0.5rem;
        font-weight: 600;
      }
      .name-icon {
        position: absolute;
        left: 0.5rem;
        top: -0.4rem;
        width: 1.4rem;
        height: 1.4rem;
        background-color: #fff;
        padding: 0.3rem;
        border: 1px solid #182c56;
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: space-around;
        img {
          width: 80%;
          height: 80%;
        }
      }
      .name-phone {
        position: absolute;
        left: 5.8rem;
        top: -0.4rem;
        width: 1.4rem;
        height: 1.4rem;
        background-color: #fff;
        padding: 0.3rem;
        border: 1px solid #182c56;
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: space-around;
        img {
          width: 50%;
          height: 50%;
        }
      }
    }
    .info-fw {
      margin-top: 1.2rem;
      width: 20rem;
      // flex: 1;
      background-image: url("@/assets/lwfb-wb.png");
      background-size: 100% 100%;
      position: relative;
      padding: 0.7rem 0.5rem;
      .title {
        position: absolute;
        left: 1.5rem;
        font-size: 0.75rem;
        top: -0.45rem;
      }
    }
    .info-from {
      font-size: 0.75rem;
      color: #192c55;
      .li:first-child {
        margin-top: 0.7rem;
      }
      .li {
        display: flex;
        height: 1.2rem;
        margin-top: 0.3rem;
        .lable {
          line-height: 1.2rem;
          width: 4rem;
        }
        .value {
          width: 13.5rem;
          border-bottom: 1px solid #192c55;
          white-space: nowrap; //不支持换行
          overflow: hidden; //隐藏多出部分文字
          text-overflow: ellipsis; //用省略号代替多出部分文字
        }
        .icon {
          margin-left: 1rem;
          img {
            width: 0.9rem;
            height: 0.8rem;
          }
        }
      }
    }
    .info-qy {
      .region {
        background-color: #192c55;
        display: flex;
        align-items: center;
        // justify-content: space-around;
        margin-top: 1rem;
        width: 19.5rem;
        padding: 0.2rem 0.4rem;
        .lable {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 2.8rem;
          font-size: 0.6rem;
          text-align: center;
          background-color: #fff;
          border-radius: 0.1rem;
        }
        .value {
          color: #fff;
          // max-width: 30%;
          white-space: nowrap; //不支持换行
          overflow: hidden; //隐藏多出部分文字
          text-overflow: ellipsis; //用省略号代替多出部分文字
          font-size: 0.8rem;
        }
        .value:nth-child(2) {
          margin-left: 1rem;
        }
        .value:nth-child(3) {
          margin-left: 1.5rem;
        }
      }
      .location {
        display: flex;
        font-size: 0.6rem;
        margin-top: 0.4rem;
        .icon {
          width: 0.32rem;
          height: 0.5rem;
          margin: 0 0.2rem 0 0.5rem;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .lie {
          width: 83%;
          white-space: nowrap; //不支持换行
          overflow: hidden; //隐藏多出部分文字
          text-overflow: ellipsis; //用省略号代替多出部分文字
        }
      }
    }
    .information {
      // margin-top: 1rem;
      width: 19.5rem;
      // position: absolute;
      // bottom: 2%;
      div {
        margin: 0 auto;
        width: 4rem;
        text-align: center;
        p {
          font-size: 0.7rem;
        }
      }
    }
  }
}
.table-conter {
  padding: 3.5rem 0.5rem 0.5rem;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  .head {
    position: absolute;
    font-size: 1rem;
    left: 0.5rem;
    top: 1.5rem;
  }
  .table-son {
    height: 88%;
  }
}
::v-deep .style1 {
  margin-left: 0.3rem;
  .el-input__prefix {
    width: 1.2rem;
    height: 1.2rem;
    content: "";
    background: url(../assets/yellowdownsanjiao.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    // top: 50%;
    margin-left: calc(100% - 1.5rem) !important;
    // transform: translate(-50%, -50%);
  }
  .el-input__inner {
    height: 1.3rem;
    font-family: JCYT;
    border: 0.05rem solid #192c55;
    border-radius: 1.1rem;
    background-color: transparent;
    padding-left: 0.5rem;
    padding-right: 2.5rem;
    position: relative;
    font-size: 0.7rem;
  }
  .el-input__icon {
    line-height: 1.3rem;
    width: 1rem;
    height: 1rem;
    // display: none;
  }
  .el-input__suffix {
    width: 1rem;
    height: 1rem;
    color: #192c55;
    right: 1.3rem;
    // top: calc(100% - 0.6rem);
  }
  .el-date-editor.el-input {
    width: 8rem;
  }
}

::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background: rgba(22, 89, 134, 0.75) !important;
}
::v-deep .el-table__body tr.current-row > td {
  background: rgba(9, 54, 103, 0.75) !important;
}
::v-deep .el-table__empty-text {
  color: #fff !important;
}
::v-deep .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}
.el-table::before {
  background-color: transparent;
}
.el-table__body-wrapper {
  background-color: transparent;
}
.el-table,
.el-table__expanded-cell {
  font-size: 0.7rem;
  background-color: transparent;
}
.el-table td.el-table__cell {
  border: none;
  padding: 0.6rem 0;
}
::v-deep .el-table__row {
  .el-table__cell:last-child {
    width: 5rem;
  }
}
.el-table__cell {
  padding: 0.7rem 0 !important;
}
.el-table__row:nth-child(2n) {
  background-color: #e4e8f2;
}

.el-icon {
  font-size: 0.6rem !important;
}
</style>
<style>
.scrollbar::-webkit-scrollbar {
  width: 0.2rem;
}
.scrollbar::-webkit-scrollbar-track {
  background-color: #dadee6;
}
.container::-webkit-scrollbar {
  width: 0.2rem;
}
.container::-webkit-scrollbar-track {
  background-color: #dadee6;
}
</style>
